<!DOCTYPE html>
<html>

<head>
    <title>对话框函数</title>
    <meta charset="utf-8">
    <style>
        .js-hide {
            display: none !important;
        }

        .dialog-mask {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 9999;
            background: rgba(0, 0, 0, .3)
        }

        .dialog-con {
            width: 50%;
            max-height: 60%;
            padding: 20px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
        }

        .dialog-close {
            position: absolute;
            right: 20px;
            top: 20px;
        }
    </style>
</head>

<body>
    <script>
        //定义一个函数  ，这个函数将 一个对象中不为undefined的元素赋给另一个对象，并返回另一个对象
        function mixin(target, op) {
            for (var i in op) {
                if (op[i] != undefined) {
                    target[i] = op[i];
                }
            }
            return target;
        }
        //查看一个节点中是否含有classname，首先，将classname用正则表达式一空格为间隔，存入数组中
        function hasClass(el, className) {
            if (el && el.className !== void 0) {
                var classList = el.className.split(/\s+/);
                if (classList.indexOf(className) > -1) {
                    return true;
                } else {
                    return false;
                }
            } else {
                return false;
            }
        }
        // 将classname以空格为间隔放入数组中，然后通过indexof找到位置，再通过splice删除掉这个类
        function removeClass(el, className) {
            if (hasClass(el, className)) {
                var classList = el.className.split(/\s+/);
                var deleteIndex = classList.indexOf(className);
                classList.splice(deleteIndex, 1);
                el.className = classList.join(' ');
            }
        }
        //增加一个类
        function addClass(el, className) {
            if (!hasClass(el, className)) {
                el.className = el.className + ' ' + className;
            }
        }

        function Dialog(params) {
            if (!(this instanceof Dialog)) {
                return new Dialog(params);
            }
            var defaultConfig = {
                maskClose: true,
                buttons: [{
                    name: '确定',
                    needClose: true,
                    needDestory: true,
                    callback: function () {
                        console.log(1);
                    }
                }],
                title: 'title',
                content: 'content',
                needClose: true,
                autoShow: true,
                hideDestory: true
            }
            this.config = mixin(defaultConfig, params);
            this.init();
            console.log(this);
        }
        Dialog.prototype.init = function () {
            this.render();
            if (this.config.needClose) {
                this.$close = this.$el.getElementsByClassName('dialog-close')[0];
            }
            this.bindEvent();
            if (this.config.autoShow) {
                this.show();
            }
        }
        Dialog.prototype.bindEvent = function () {
            var me = this;
            if (me.$close) {
                me.$close.addEventListener('click', function (e) {
                    me.hide();
                })
            }
            if ((me.config.buttons && me.config.buttons.length) || me.config.maskClose) {
                me.$el.addEventListener('click', function (e) {
                    var target = e.target;
                    if (hasClass(target, 'dialog-btn')) {
                        var index = target.getAttribute('data-index');
                        if (me.config.buttons[index] && me.config.buttons[index].needClose) {
                            me.hide();
                        }
                        if (me.config.buttons[index] && me.config.buttons[index].needDestory) {
                            me.destory();
                        }
                        if (me.config.buttons[index] && me.config.buttons[index].callback &&
                            (typeof me.config
                                .buttons[index].callback == 'function')) {
                            me.config.buttons[index].callback();
                        }
                    }

                    if (me.config.maskClose && hasClass(target, 'dialog-mask')) {
                        me.hide();
                    }
                })
            }
        }
        Dialog.prototype.render = function () {
            this.$el = document.createElement('div');
            this.$el.className = 'js-hide';
            this.$el.innerHTML = this.getHTML();
            document.body.appendChild(this.$el);
        }
        Dialog.prototype.getHTML = function () {
            return '<div class="dialog-mask">' +
                '<div class="dialog-con">' +
                (this.config.needClose ? '<div class="dialog-close">x</div>' : '') +
                '<div class="dialog-title">' + this.config.title + '</div>' +
                '<div class="dialog-content">' + this.config.content + '</div>' +
                '<div class="dialog-btns">' + this.config.buttons.map(function (item, index) {
                    return '<button class="dialog-btn" data-index="' + index + '">' + item.name +
                        '</button>'
                }).join('') + '</div>'
            '</div>' +
            '</div>'
        }
        Dialog.prototype.show = function () {
            if (this.$el) {
                removeClass(this.$el, 'js-hide');
            }
        }
        Dialog.prototype.destory = function () {
            this.$el.remove();
        }
        Dialog.prototype.hide = function () {
            addClass(this.$el, 'js-hide');
            if (this.config.hideDestory) {
                this.destory();
            }
        }
        // var d = Dialog();
        function Alert(msg) {
            return Dialog({
                title: '',
                content: msg,
                buttons: [{
                    name: '确定',
                    needClose: true,
                    needDestory: true
                }]
            })
        }
        Alert('test');
    </script>
</body>

</html>